<template>
	<BasicContainer :navigators="['一级菜单', '二级菜单', '三级菜单']" :title="'项目关联管理'">
		<div style="width:1300px;">
			<a-form layout="inline">
				<a-row style="margin-bottom:15px">
					<a-col :span="6">
						<a-form-item label="ITPM项目名称">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="TAPD项目名称">
							<a-input placeholder="请输入" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row>
					<a-col :span="6">
						<a-button type="primary" style="margin-left:95px">
							<a-icon type="search" />搜索
						</a-button>
						<a-button style="margin-left: 10px;">
							<a-icon type="reload" />重置
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<a-table :columns="columns" style="margin-top: 16px" :locale="locale" :dataSource="tableData"
			:pagination="tablePagination" :rowKey="(record, index) => index">
			<template slot="itpmProjectName" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.itpmProjectName">
					<template slot="title">
						<p>{{ record.itpmProjectName }}</p>
					</template>
					<span style="cursor:default">{{ record.itpmProjectName }}</span>
				</a-tooltip>
				<span v-else-if="!record.itpmProjectName">—</span>
			</template>
			<template slot="tapdProjectName" slot-scope="text,record">
				<a-tooltip placement="top" v-if="record.tapdProjectName">
					<template slot="title">
						<p>{{ record.tapdProjectName }}</p>
					</template>
					<span style="cursor:default">{{ record.tapdProjectName }}</span>
				</a-tooltip>
				<span v-else-if="!record.tapdProjectName">—</span>
			</template>
			<template slot="operation" slot-scope="text,record">
				<a-popconfirm style="width:350px" placement="leftBottom" ok-text="确定" cancel-text="取消">
					<template slot="title">
						<span>你确定要解除项目绑定吗？解除后已同步项目需求数据维持不变,重新绑定项目会再次同步ITPM全部项目需求到TAPD。</span>
					</template>
					<span class="operationUnbundle">解绑</span>
				</a-popconfirm>
				<a-dropdown class="operationMore">
					<a href="#">更多操作</a>
					<a-menu slot="overlay">
						<a-menu-item>
							<a>同步新增需求</a>
						</a-menu-item>
						<a-menu-item>
							<a>同步变更需求</a>
						</a-menu-item>
						<a-menu-item>
							<a>同步需求进展</a>
						</a-menu-item>
					</a-menu>
				</a-dropdown>
			</template>
		</a-table>
	</BasicContainer>
</template>
<script>
import EmptyWrap from '@/components/emptyWrap';
export default {
	data() {
		return {
			locale: {//默认文案设置，目前包括排序、过滤、空数据文案
				emptyText: <EmptyWrap text="暂无相关数据" type="file-search"></EmptyWrap>
			},
			tablePagination: {//主页表格的分页器
				showQuickJumper: true,//是否可以快速跳转至某页
				showSizeChanger: true,//是否可以改变 pageSize
			},
			columns: [
				{
					title: "ITPM项目名称",
					dataIndex: "itpmProjectName",
					scopedSlots: { customRender: 'itpmProjectName' },
				},
				{
					title: "ITPM项目编码",
					dataIndex: "itpmProjectCoding",
					customRender:(text,record)=>{
						return record.itpmProjectCoding?record.itpmProjectCoding:'—';
					},
				},
				{
					title: "TAPD项目名称",
					dataIndex: "tapdProjectName",
					scopedSlots: { customRender: 'tapdProjectName' },
				},
				{
					title: "TAPD ID",
					dataIndex: "tapdId",
					customRender:(text,record)=>{
						return record.tapdId?record.tapdId:'—';
					},
				},
				{
					title: "关联时间",
					dataIndex: "relevanceTime",
					customRender:(text,record)=>{
						return record.relevanceTime?record.relevanceTime:'—';
					},
				},
				{
					title: "操作",
					dataIndex: "operation",
					scopedSlots: { customRender: 'operation' },
				},
			],
			tableData: [
				{
					itpmProjectName: "项目1",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目2",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目3",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目4",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目5",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目6",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目7",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目8",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目9",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目10",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
				{
					itpmProjectName: "项目11",
					itpmProjectCoding: "1234",
					tapdProjectName: "tapd项目1",
					tapdId: "741",
					relevanceTime: 2022,
				},
			],
		}
	},
	computed: {},
	methods: {

	},

}
</script>
<style scoped>
.operationUnbundle {
	color: red;
	cursor: pointer;
}

.operationMore {
	margin-left: 20px;
}
</style>